import React from "react";
import { AtForm, AtInput } from "taro-ui";
import { View } from "@tarojs/components";

export default (props) => {
  return (
    <>
      <AtForm>
        {/* 血压 */}
        <View className="blood borderBottom">
          <View className="fontBold">血压</View>
          <View className="at-row">
            <View className="at-col-6">
              <View className="font">高压</View>
              <View className="bloodInput at-row">
                <AtInput
                  name="highBloodPressure"
                  value={props.data.highBloodPressure}
                  onChange={props.change.bind(this, "highBloodPressure")}
                  placeholder="请输入高压"
                />
                <View className="at-col at-col-1 at-col--auto">mmHg</View>
              </View>
            </View>
            <View className="at-col-6">
              <View className="font">低压</View>
              <View className="bloodInput at-row">
                <AtInput
                  name="lowBloodPressure"
                  value={props.data.lowBloodPressure}
                  onChange={props.change.bind(this, "lowBloodPressure")}
                  placeholder="请输入低压"
                />
                <View className="at-col at-col-1 at-col--auto">mmHg</View>
              </View>
            </View>
          </View>
        </View>
        {/* 血糖 */}
        <View className="blood">
          <View className="fontBold">血糖</View>
          <View className="at-row">
            <View className="at-col-6">
              <View className="font">餐前</View>
              <View className="bloodInput at-row">
                <AtInput
                  name="preMealBloodGlucose"
                  value={props.data.preMealBloodGlucose}
                  onChange={props.change.bind(this, "preMealBloodGlucose")}
                  placeholder="餐前血糖"
                />
                <View className="at-col at-col-1 at-col--auto">mmol/L</View>
              </View>
            </View>
            <View className="at-col-6">
              <View className="font">餐后</View>
              <View className="bloodInput at-row">
                <AtInput
                  name="postMealBloodGlucose"
                  value={props.data.postMealBloodGlucose}
                  onChange={props.change.bind(this, "postMealBloodGlucose")}
                  placeholder="餐后血糖"
                />
                <View className="at-col at-col-1 at-col--auto">mmol/L</View>
              </View>
            </View>
          </View>
        </View>
      </AtForm>
    </>
  );
};
